<template>
    <div class="Statistic">
        <div class="form">
        <el-form :model="StatisticsData" style="display: flex;justify-content: space-between;align-items: center;
                    gap:15px;padding: 30px 0;">
            <el-form-item label="选择时间" style="width: 300px;">
                <el-date-picker v-model="StatisticsData.times" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="选择地块" style="width: 200px;">
                <el-select v-model="StatisticsData.place" placeholder="地块1 " label-width="100px" clearable>
                    <el-option label="地块1" value="地块1" />
                    <el-option label="地块2" value="地块2" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择人员" style="width: 200px;">
                <el-select v-model="StatisticsData.people" placeholder="王浩" clearable>
                    <el-option label="王浩" value="王浩" />
                    <el-option label="张山" value="张山" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchHandler"> 查询 </el-button>
                <el-button @click="(router.push({name:'harvest'}))"> 返回 </el-button>
            </el-form-item>
            <el-form-item>
                
            </el-form-item>
        </el-form>
        </div>
        <h3>采收统计</h3>
        <div ref="StatisticsCharts" class="chart-container">
        </div>
        <el-table :data="data" style="width: 100%">
        <el-table-column prop="id" label="序号" width="50" />
        <el-table-column prop="place" label="地块名称" width="100" />
        <el-table-column prop="food" label="地块作物" width="120" />
        <el-table-column prop="people" label="采收人" width="80" />
        <el-table-column prop="times" label="采收时间" width="130" />
        <el-table-column  label="采收总量" width="80">
            <template #default="scope">
                {{ (scope.row.first||0)+(scope.row.second||0)+(scope.row.third||0)+(scope.row.common||0) }}
            </template>
        </el-table-column>
        <el-table-column prop="first" label="一级果（公斤）" />
        <el-table-column prop="second" label="二级果公斤" />
        <el-table-column prop="third" label="三级果（公斤）" />
        <el-table-column prop="common" label="通货" />
    </el-table>
    </div>
</template>

<script lang='ts' setup>
import type { PlanItems } from '@/interface/harvestInterface';
import router from '@/router';
import * as echarts from 'echarts';
import { onMounted, ref, type Ref } from 'vue';
const StatisticsCharts = ref()
const props = defineProps(['data'])
const validData = props.data.filter(item =>
    item.batch && // 批次编号不为空
    !isNaN(item.first) && // 一级果量为数字
    !isNaN(item.second) &&
    !isNaN(item.third) &&
    !isNaN(item.common)
)




const StatisticsData = {
    times: '',
    place: '',
    people: ''
}
const searchHandler = () => {

}

const loadHandler = () => {

}
// var myChart = echarts.init(chartDom);
let myChart: echarts.ECharts
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    legend: {
        data: ['一级果', '二级果', '三级果', '通货', '累计采收量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['2019040001', '2019040002', '2019040003', '2019040004', '2019040005', '2019040006'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '采收量（公斤）',
            min: 0,
            max: 3500,
            interval: 1000,
            axisLabel: {
                formatter: '{value} 公斤'
            }
        },
        {
            type: 'value',
            name: '累计采收量',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
                formatter: '{value} 公斤'
            }
        }
    ],
    series: [
        {
            name: '一级果',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 公斤';
                }
            },
            data: props.data.map(item => item.first)
        },
        {
            name: '二级果',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 公斤';
                }
            },
            data: props.data.map(item => item.second)
        },
        {
            name: '三级果',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 公斤';
                }
            },
            data: props.data.map(item => item.third)
        },
        {
            name: '通货',
            type: 'bar',
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 公斤';
                }
            },
            data: props.data.map(item => item.common)
        },
        {
            name: '累计采收量',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
                valueFormatter: function (value) {
                    return value + ' 公斤';
                }
            },
            data: validData.map(item =>
                item.first + item.second + item.third + item.common
            )
        }
    ]
};
onMounted(() => {
    myChart = echarts.init(StatisticsCharts.value)
    myChart.setOption(option)
})



</script>

<style lang='scss' scoped>
.Statistic {  
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.chart-container {
    width: 100%;
    height: 50%;  
    /* 减去表单高度 */
    min-height: 400px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}
.form{
    display: flex;
    justify-content: space-between;
}
</style>